<template>
    <div class="order-detail-container">
        <div class="header">
            <el-button @click="router.back()" type="text">
                <el-icon><ArrowLeft /></el-icon> 返回
            </el-button>
            <h2>订单详情</h2>
           
        </div>

        <el-card class="order-table-card">
            <el-table
                :data="tableData"
                style="width: 100%"
                v-loading="loading"
                border
            >
                <!-- 修复：添加缺失的 doctor 列 -->
                <el-table-column prop="doctor" label="医生" width="120" />
                <el-table-column prop="orderId" label="订单号" width="180" />
                <el-table-column prop="productName" label="商品名称" width="300">
                    <template #default="{ row }">
                        <div class="product-name">
                            {{ row.productName }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="amount" label="订单金额" width="120">
                    <template #default="scope">
                        {{ scope.row.amount }} 元
                    </template>
                </el-table-column>
                <el-table-column prop="submitTime" label="下单时间" width="180" />
                <el-table-column prop="recipient" label="收件人" width="120" />
                <el-table-column prop="contact" label="联系方式" width="150">
                    <template #default="scope">
                        {{ scope.row.contact.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3') }}
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination-container">
                <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    layout="total, sizes, prev, pager, next"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElTable, ElTableColumn, ElPagination, ElCard, ElButton, ElIcon } from 'element-plus';
import { ArrowLeft } from '@element-plus/icons-vue';

const router = useRouter();

// 表格数据
const tableData = ref([]);
const loading = ref(false);

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 生成模拟数据
// 修改后的模拟数据生成
const generateMockData = (count) => {
    const doctors = ['赵医生', '王医生', '李医生', '张医生'];
    const products = [
        '【免疫调节】富硒酵母口服液 提升免疫 增强食欲 北大研发 富硒酵母 (90富硒康30ML*18瓶 2盒 （买二送一）)',
        '【营养短肽】全面营养补充 短肽蛋白 进食困难 消化吸收紊乱 (【优惠】1罐（送1袋试用装）)'
    ];
    
    return Array.from({ length: count }, (_, index) => {
        const date = new Date();
        date.setHours(date.getHours() - Math.floor(Math.random() * 72));
        
        return {
            doctor: doctors[index % doctors.length],
            orderId: `ORD${date.getTime().toString().slice(-10)}`,
            productName: products[index % products.length],
            amount: (Math.random() * 1000 + 100).toFixed(2),
            submitTime: date.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            }),
            recipient: ['姜海涛', '李晓明', '王芳', '张伟'][index % 4],
            contact: `139${String(Math.floor(Math.random() * 100000000)).padStart(8, '0')}`
        };
    });
};

// 加载数据
const loadData = () => {
    loading.value = true;
    // 模拟API调用延迟
    setTimeout(() => {
        const mockData = generateMockData(100);
        total.value = mockData.length;
        
        // 计算分页数据
        const start = (currentPage.value - 1) * pageSize.value;
        const end = start + pageSize.value;
        tableData.value = mockData.slice(start, end);
        
        loading.value = false;
    }, 500);
};

// 处理分页大小变化
const handleSizeChange = (val) => {
    pageSize.value = val;
    loadData();
};

// 处理页码变化
const handleCurrentChange = (val) => {
    currentPage.value = val;
    loadData();
};

onMounted(() => {
    loadData();
});
</script>

<style scoped>
.order-detail-container {
    padding: 20px;
}

.header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.header h2 {
    margin: 0 0 0 10px;
}

.order-table-card {
    margin-bottom: 20px;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.product-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.5;
    word-break: break-all;
}

</style>
